Skip to content

MVP of Auth0 signup flow, additional signup form, dashboard access (styling per Figma design). #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

MVP of Auth0 signup flow, additional signup form, dashboard access (styling per Figma design). #8

wants to merge 3 commits into from

Conversation

stevenseb
Copy link

@stevenseb stevenseb commented May 5, 2025 •
edited
Loading

Attached to issue: #6

Still much to do on finer details:

  • 1. Likely need to get the Figma logo version updated in the code
  • 2. May need to get with MK to review application of color palette to make sure it is all correct
  • 3. Attempted to solve known issue with Auth0 and SPA given that hitting back button after registration can result in Auth0 error page since the connection is closed once registration complete (attempted a fix in /components/BackNavigationFix.tsx but doesn't seem to work
  • 4. Still need to render login button, component with logic in /auth0 folder however, need to discuss entire header layout, proper logged-in button views etc. so we can get it all correct together
  • 5. Used '/' root route to display a mock-up landing page to simulate hitting the sign-up button from WP site or external source to test the entire flow and created a PublicHeader component based off of the Header component but we have 2 headers with slightly different styling, but really the PublicHeader.tsx is just for testing/dev so, need to focus on making Header.tsx work as it should for logged in user.
  • 6. Have not really implemented or thoroughly tested mobile styling, just have some basic minimums.
  • 7. Need to resolve the consent popup which we don't want right now.
  • 8. May need to enhance the form validator as it's only checking completion right now.
  • 9. Still plan to refactor some code to separate concerns and improve readability.
  1. Probably will be helpful if we check global styles and set more of them as appropriate.
  2. I moved any css stylesheets into /styles folder inside of /components and /pages and a mockDB file is inside the /utils folder.
  3. Just a fairly good MVP right now to see if on the right track

Welcome feedback on styling and thorough testing to find any other potential bugs. Next steps are verify/correct styling per MK and Figma designs and fully code the logic for header and buttons when logged in. Functionality requires .env variables which I can share with Peter via Slack if that's acceptable.

image

{874482EF-97A0-4534-BE55-2AB147C74CEC}

{05AF4CA5-C5CB-42A2-ADDF-F21895EC649D}

localhost_5173_signup

@netlify Netlify
Copy link

netlify bot commented May 5, 2025 •
edited
Loading

👷 Deploy request for helpful-platform pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit bc1cfe8

@Jbutler-helpful
Copy link

Jbutler-helpful commented May 13, 2025 •
edited
Loading

Yes!!! it deployed, I can't get to the top registration page using the sign in/sign up

@mkharkar
Copy link

mkharkar commented May 15, 2025 •
edited
Loading

Hey @stevenseb ! Thanks for sharing the screenshots. Few quick notes -

  1. The styling of the field boxes needs to be updated—please refer to the final version here: https://www.figma.com/design/Q2OzxOL3BB6aqwuXBGZG0w/Low-Fidelity?node-id=68-2963&t=ZL2zjetwQwHS6MNq-1 for reference.
  2. The spacing between fields could use a bit more breathing room and should be consistent throughout.
  3. For the selected skill pills, the grey background color from the final design needs to be applied here as well.
  4. The top nav bar should follow the light grey style that we’ve used consistently across other pages.
  5. Overall, we just need to tighten up spacing, color usage, and box styles to align with the final design.

@psprings psprings added the enhancement New feature or request label May 15, 2025
@psprings psprings linked an issue May 15, 2025 that may be closed by this pull request
We need a signup + flow that includes basic authentication #6
Open
@Jbutler-helpful
Copy link

@mkharkar What do you think of @stevenseb progress?

@stevenseb
Copy link
Author

stevenseb commented May 29, 2025 •
edited
Loading

Hey @stevenseb ! Thanks for sharing the screenshots. Few quick notes -

  1. The styling of the field boxes needs to be updated—please refer to the final version here: https://www.figma.com/design/Q2OzxOL3BB6aqwuXBGZG0w/Low-Fidelity?node-id=68-2963&t=ZL2zjetwQwHS6MNq-1 for reference.
  2. The spacing between fields could use a bit more breathing room and should be consistent throughout.
  3. For the selected skill pills, the grey background color from the final design needs to be applied here as well.
  4. The top nav bar should follow the light grey style that we’ve used consistently across other pages.
  5. Overall, we just need to tighten up spacing, color usage, and box styles to align with the final design.

Based on today's standup these items have all been addressed in the new commit done today. Here is a screenshot of the current view. Designers will be working on refinement to the header design.

localhost_5173_signup (1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mkharkar mkharkar Awaiting requested review from mkharkar

@psprings psprings Awaiting requested review from psprings

@gurupreeth6 gurupreeth6 Awaiting requested review from gurupreeth6

Assignees

@stevenseb stevenseb

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

We need a signup + flow that includes basic authentication
4 participants
@stevenseb @Jbutler-helpful @mkharkar @psprings